<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>注册界面</title>
		<link rel="stylesheet" href="assets/css/reset.css" />
		<link rel="stylesheet" href="assets/css/common.css" />
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/css/amazeui.min.css">
		<link rel="stylesheet" href="assets/css/amazeui.cropper.css">
		<link rel="stylesheet" href="assets/css/custom_up_img.css">
	    <link rel="stylesheet" href="assets/css/layui.css"  media="all">
	    <link rel="stylesheet" href="assets/js/layer.css"  media="all">
		<style type="text/css">
			.up-img-cover {width: 100px;height: 100px;}
			.up-img-cover img{width: 100%;}
		</style>
	<script src="assets/js/layui.js" charset="utf-8" type="text/javascript"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>
	<body>
		<div class="wrap login_wrap">
			<div class="content">

				<div class="logo"></div>

				<div class="login_box">

					<div class="login_form">
						<div class="login_title">
							注册
						</div>
						<form action="#" method="post">

							<div class="layui-input-block">
								<input id="username" type="text" name="title" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-input-block">
								<input id="password" type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-input-block">
								<input id="repassword" type="password" name="password" required lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
							</div>

							<div class="layui-upload">
								<button type="button" class="layui-btn" id="test1">上传头像</button>
								<div class="layui-upload-list">
									<img class="layui-upload-img" id="idPhoto">
									<p id="demoText"></p>
								</div>
							</div>

							<div class="layui-input-block">
								<textarea id="introduction" name="desc" placeholder="请输入个人简介" class="layui-textarea"></textarea>
							</div>

							<div class="form_btn">
								<button type="button" onclick="register()">注册</button>
							</div>
							<div class="form_reg_btn">
								<span>已有帐号？</span><a href="index.html">马上登录</a>
							</div>
						</form>
						<div class="other_login">
							<div class="left other_left">
								<span>其它登录方式</span>
							</div>
							<div class="right other_right">
								<a href="#"><i class="fa fa-qq fa-2x"></i></a>
								<a href="#"><i class="fa fa-weixin fa-2x"></i></a>
								<a href="#"><i class="fa fa-weibo fa-2x"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="assets/js/jquery.min.js" ></script>
		<script type="text/javascript" src="assets/js/common.js" ></script>
		<script src="assets/js/jquery.min.js" charset="utf-8"></script>
		<script src="assets/js/amazeui.min.js" charset="utf-8"></script>
		<div style="text-align:center;">
			<script>
				var idPhoto;
				layui.use('upload', function(){
					var $ = layui.jquery
							,upload = layui.upload;

					//普通图片上传
					var uploadInst = upload.render({
						elem: '#test1'
						,url: 'http://localhost:8764/pcApi/uploadimg'
						,before: function(obj){
							//预读本地文件示例，不支持ie8
							obj.preview(function(index, file, result){
								$('#idPhoto').attr('src', result); //图片链接（base64）
							});
						}
						,done: function(res){
							//上传成功
							if(res.errcode == "200"){
								idPhoto = res.url
								layer.msg('上传成功');
							}
							//上传失败
							else{
								layer.msg('上传失败');
							}

						}
						,error: function(){
							//演示失败状态，并实现重传
							var demoText = $('#demoText');
							demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
							demoText.find('.demo-reload').on('click', function(){
								uploadInst.upload();
							});
						}
					});

				});

				function register() {
					var username = $("#username").val()
					var password = $("#password").val();
					var repassword = $("#repassword").val();
					var introduction = $("#introduction").val();

					if(username.length === 0){
						layer.msg("用户名不能空")
						return;
					}
					if(password.length === 0){
						layer.msg("密码不能空")
						return;
					}
					if(repassword.length === 0){
						layer.msg("确认密码不能空")
						return;
					}
					if(introduction.length === 0){
						layer.msg("个人简介不能空")
						return;
					}
					if(password != repassword){
						layer.msg("确认密码与当前密码不一致")
						return;
					}
					var user = {"username":username,"password":password,"idPhoto":idPhoto,"introduction":introduction}

					$.ajax({
						type: 'POST',
						url: 'http://localhost:8764/pcApi/register',
						dataType: 'json',
						contentType: "application/json",
						data:JSON.stringify(user),
						success: function (data) {
							if(data.errcode === "200"){
								layer.msg("注册成功")
								setTimeout("window.location.href = 'index.html'",2000)
							}
							else{
								layer.msg(data.errmsg)
							}
						},
						error: function (XMLHttpRequest, textStatus, errorThown) {
							layer.msg("操作失败！");
						}
					});

				}
			</script>

</div>
	</body>
</html>
